<template>
	<!-- 少多语言 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{coinType}} {{i18n.t001}}
				</view>
				<view class="flex-1 text-alignR A-Medium record" :class="model=='light'?'recordLight':''">
					<view @click="$tool.navTo('/pages/property/jiaoyijiluCXC?coinType='+coinType)" class="pr-3">
						{{i18n.t002}}
					</view>
				</view>
			</view>
		</view>
		<view style="height: 24rpx;">

		</view>
		<view class="flex ml-3 align-center">
			<view class="f0 mr-2">
				<image style="width: 72rpx;height: 72rpx;" v-if="coinType=='USDT'" src="/static/images/trade/17.png"
					mode=""></image>
				<image style="width: 72rpx;height: 72rpx;" v-if="coinType=='BTC'" src="/static/images/trade/18.png"
					mode=""></image>
				<image style="width: 72rpx;height: 72rpx;" v-if="coinType=='ETH'" src="/static/images/trade/19.png"
					mode=""></image>
			</view>
			<view class="title1 A-Bold" :class="model=='light'?'title1Light':''">
				{{coinType}}
			</view>
		</view>
		<view class="block mt-3 mx-3 p-3 A-Medium" :class="model=='light'?'blockLight':''">
			<view class="flex align-center justify-between">
				<view class="text1">
					{{i18n.t003}}
				</view>
				<view class="" style="font-size: 22rpx;color: #D22540;">
					<!-- {{price}} {{coinType}} -->
					{{i18n10.n097}}{{min}}-{{max}} {{coinType}}
				</view>
			</view>
			<view class="flex px-3 mt-3 inputWrap align-center" :class="model=='light'?'inputWrapLight':''">
				<input v-model="price" class="flex-1" type="text" placeholder-class="placeholderClass"
					:placeholder="i18n10.n156+min+coinType+i18n10.n157">
				<!-- <view @click="allMoney" class="text3" style="font-size: 28rpx;">
					{{i18n.t022}}
				</view> -->
			</view>
			<view class="flex my-3 align-center justify-between">
				<view class="text1">
					{{i18n.t004}} {{
							coinType=='USDT'?USDTMoney.a:
							coinType=='BTC'?BTCMoney.a:
							coinType=='ETH'?ETHMoney.a:''
						}} {{coinType}}
				</view>
				<view @click="gocz" class="text3">
					{{i18n.t005}}
				</view>
			</view>
			<view class="flex align-center justify-between">
				<view v-if="list.length!=0" class="text1">
					{{list[listIndex].title}}{{i18n.t008}}{{i18n.t006}}
				</view>
				<view v-if="list.length!=0" class="text4" style="color: #D22540;">
					{{list[listIndex].value||''}}%
				</view>
			</view>
		</view>
		<view class="title2 mt-4 mb-3 A-Bold ml-3" :class="model=='light'?'title2Light':''">
			{{i18n.t007}}
		</view>
		<view class="flex mx-3 align-center justify-between">
			<view v-if="list.length!=0" @click="changelistIndex(index)" v-for="(item, index) in list"
				style="position: relative;" class="flex align-center justify-center A-Medium"
				:class="listIndex==index?model=='light'?'item2Light':'item2':model=='light'?'item1Light':'item1'">
				{{item.title}}{{i18n.t008}}
				<view v-if="listIndex==index" class="f0">
					<image style="width: 44rpx;height: 38rpx;position: absolute;right: 0;bottom: 0;"
						src="/static/images/trade/trade2.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="title2 mt-4 mb-3 A-Bold ml-3" :class="model=='light'?'title2Light':''">
			{{i18n.t009}}
		</view>
		<view class="block mx-3" style="background: unset;border: none;" :class="model=='light'?'blockLight':''">
			<view class="flex align-center justify-between">
				<view class="text1">
					<!-- {{i18n.t010}} -->
					{{i18n10.n099}}
				</view>
				<view class="text2">
					<!-- {{xianzhi.totalQuotaRemain || 0}} {{coinType}} -->
					{{
						coinType=='BTC'?BTCtotalAmountSum:
						coinType=='ETH'?ETHtotalAmountSum:
						coinType=='USDT'?USDTtotalAmountSum:''
						}} {{coinType}}
				</view>
			</view>
			<view class="flex my-2 align-center justify-between">
				<view class="text1">
					<!-- {{i18n.t011}} -->
					{{i18n10.n100}}
				</view>
				<view class="text2">
					{{xianzhi.individualQuotaRemain || 0}} {{coinType}}

				</view>
			</view>
			<view class="flex align-center justify-between">
				<view class="text1">
					{{i18n.t012}}
				</view>
				<view class="text2">
					{{xianzhi.individualPartQuota || 0}} {{coinType}}
				</view>
			</view>
		</view>
		<view class="title2 mt-4 mb-3 A-Bold ml-3" :class="model=='light'?'title2Light':''">
			<!-- {{i18n.t013}} -->
			{{i18n10.n101}}
		</view>
		<view class="mx-3 flex align-center">
			<view class="f0 mx-1">
				<image style="height: 122rpx;" src="/static/images/trade/trade22.png" mode="heightFix"></image>
			</view>
			<view class="block flex-1" style="background: unset;border: none;" :class="model=='light'?'blockLight':''">
				<view class="flex align-center justify-between">
					<view class="text1">
						{{i18n.t014}}
					</view>
					<view class="text2">
						{{time1}}
					</view>
				</view>
				<view class="flex my-2 align-center justify-between">
					<view class="text1">
						{{i18n.t015}}
					</view>
					<view class="text2">
						{{time2}}
					</view>
				</view>
				<view class="flex align-center justify-between">
					<view class="text1">
						{{i18n.t016}}
					</view>
					<view class="text2">
						{{time3}}
					</view>
				</view>
			</view>
		</view>
		<view class="title2 mt-4 mb-3 A-Bold ml-3" :class="model=='light'?'title2Light':''">
			<!-- {{i18n.t017}} -->
			{{i18n10.n102}}
		</view>
		<view class="block mx-3 A-Medium" style="background: none;border: none;">
			<view class="mb-2 text1">
				<!-- {{i18n.t018}} -->
				{{i18n10.n103}}{{coinType}}{{i18n10.n104}}
			</view>
			<!-- <view class="text1">
				{{i18n.t019}}
			</view> -->
		</view>
		<!-- 占位置 -->
		<view class="flex align-center justify-between"
			style="width: 100%;padding-bottom: 64rpx;padding-top: 20rpx;opacity: 0;">
			<view class="btn A-Medium flex align-center justify-center mx-auto">
				{{i18n.t020}}
			</view>
		</view>
		<view class="flex align-center justify-between"
			style="position: fixed;bottom: 0;width: 100%;padding-bottom: 64rpx;padding-top: 20rpx;"
			:style="model=='light'?'background:#fff;':'background: #0E0F11;'">
			<!-- <view class="price ml-3 A-Bold flex align-center" :class="model=='light'?'priceLight':''">
				$
				<input class="price A-Bold" :class="model=='light'?'priceLight':''" v-model="price" type="text">
			</view> -->
			<view @click="submit" class="btn A-Medium flex align-center justify-center mx-auto">
				{{i18n.t020}}
			</view>
		</view>
		<modelP :type="3" ref="modelP" @confirm="confrim"></modelP>
	</view>
</template>

<script>
	import {
		periodYield,
		liquidityCisternQuota,
		liquidityCisternAdd,
		liquidityCisternList,
		totalAmount,
		liquidityCisternOpendate
	} from '@/core/api/index.js';
	import {
		liquidity_individual_quota
	} from '@/core/api/user.js';
	import modelP from '@/components/modelP.vue';
	export default {
		components: {
			modelP
		},
		data() {
			return {
				coinType: '',
				list: [],
				listIndex: 0,
				price: '',
				time1: '',
				time2: '',
				time3: '',
				pageNo: 1,
				pageSize: 10,
				xianzhi: {},
				min: 0,
				max: 0,
				BTCtotalAmountSum: 0,
				ETHtotalAmountSum: 0,
				USDTtotalAmountSum: 0,
				openDateList: []
			}
		},
		onLoad(options) {
			this.coinType = uni.getStorageSync('lType');
			this.getPeriodYield();
			this.getLiquidityCisternQuota();
			const now = new Date();
			// 使用getFullYear()获取完整的四位数年份
			const year = now.getFullYear();
			// 使用getMonth()获取月份，注意JavaScript中的月份是从0开始的，所以需要+1
			const month = String(now.getMonth() + 1).padStart(2, '0');
			// 使用getDate()获取日期
			const day = String(now.getDate()).padStart(2, '0');
			// 打印或返回格式化的日期
			this.time1 = `${year}/${month}/${day}`;
			this.time2 = `${year}/${month}/${day}`;
			liquidity_individual_quota({
				coinType: this.coinType
			}).then(res => {
				console.log(res.result, 'cs');
				for (let i = 0; i < res.result.length; i++) {
					if (res.result[i].value == 'min') {
						this.min = res.result[i].title;
					}
					if (res.result[i].value == 'max') {
						this.max = res.result[i].title;
					}
				}
			})
			this.getTotalAmount();
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			i18n() {
				return this.$t('trade2');
			},
			i18n4() {
				return this.$t('last');
			},
			i18n10() {
				return this.$t('newObj');
			},
			passportAuthStatus() {
				return this.$store.state.config.passportAuthStatus;
			},
			model() {
				return this.$store.state.config.model
				// return 'light'
			},
			USDTMoney() {
				return this.$store.state.config.USDTMoney
			},
			BTCMoney() {
				return this.$store.state.config.BTCMoney
			},
			ETHMoney() {
				return this.$store.state.config.ETHMoney
			},
			capitalPassword() {
				return this.$store.state.config.capitalPassword
			},
			mobileNumber() {
				return uni.getStorageSync('mobileNumber');
			},
			email() {
				return uni.getStorageSync('email');
			},
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			// 用户余额
			this.$store.dispatch('config/getAassetList');

			this.getLiquidityCisternoOpendate();

			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if (this.model == "dark") {
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			} else {
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		onReachBottom() {

		},
		methods: {
			validateAmount(value, decimals = 6) {
				// 空值校验
				if (!value) return false;

				// 转为字符串处理
				const strValue = value.toString();

				// 金额格式正则
				// ^[1-9]\d*$ 匹配大于0的整数
				// ^0$ 匹配0
				// ^[1-9]\d*\.\d{1,2}$ 匹配小数(小数位数可通过decimals参数控制)
				// ^0\.\d{1,2}$ 匹配以0开头的小数
				const regExp = new RegExp(`^(([1-9]\\d*)|0)(\\.\\d{1,${decimals}})?$`);

				return regExp.test(strValue);
			},
			getTotalAmount() {
				totalAmount({
					mobileUserId: uni.getStorageSync('mobileUserId'),
				}).then(res => {
					for (let i = 0; i < res.result.length; i++) {
						this[res.result[i].coinType + 'totalAmountSum'] = res.result[i].totalAmountSum;
					}
				})
			},
			allMoney() {
				this.price = this.coinType == 'USDT' ? this.USDTMoney.a :
					this.coinType == 'BTC' ? this.BTCMoney.a :
					this.coinType == 'ETH' ? this.ETHMoney.a : '';
			},
			gocz() {
				let id;
				if (this.coinType == 'USDT') {
					id = 1;
				}
				if (this.coinType == 'BTC') {
					id = 2;
				}
				if (this.coinType == 'ETH') {
					id = 3;
				}
				uni.setStorageSync('czType', this.coinType);
				this.$tool.navTo('/pages/property/chongzhi?type=' + id);
			},
			getLiquidityCisternList() {
				liquidityCisternList({
					coinType: '',
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					mobileUserId: uni.getStorageSync('mobileUserId'),
				}).then(res => {
					// console.log(res, 'cs');
				})
			},
			getPeriodYield() {
				periodYield({
					coinType: this.coinType
				}).then(res => {
					// console.log(res.result,'cs-----cs');
					this.list = res.result;
					this.getTime(this.list[0].title);
				})
			},
			changelistIndex(e) {
				this.listIndex = e;
				this.getTime(this.list[this.listIndex].title);
			},
			getLiquidityCisternQuota() {
				liquidityCisternQuota({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					coinType: this.coinType
				}).then(res => {
					console.log(res, 'cs-liquidityCisternQuota');
					this.xianzhi = res.result;
				})
			},
			getLiquidityCisternoOpendate() {
				liquidityCisternOpendate().then(res => {
					console.log(res, 'cs-liquidityCisternQuota');
					this.openDateList = res.result;
				})
			},
			submit() {
				if (!this.validateAmount(this.price)) {
					return this.$tool.showToast(this.i18n10.n155);
				}
				if (!this.isMultiple(this.price, this.min)) {
					return this.$tool.showToast(this.i18n10.n156 + this.min + this.coinType + this.i18n10.n157);
				}
				if (this.price <= Number(this.max) && this.price >= Number(this.min)) {

				} else {
					return this.$tool.showToast(this.i18n.t021 + this.min + '-' + this.max);
				}
				// if (this.passportAuthStatus != 3) {
				// 	// 未提交
				// 	this.$tool.showToast(this.i18n4.l015);
				// 	return;
				// }
				// if (!this.capitalPassword) {
				// 	let obj = {
				// 		type: 2,
				// 		verifyType: '',
				// 		account: '',
				// 	}
				// 	// true- 有手机号
				// 	if (this.mobileNumber) {
				// 		obj.verifyType = 1;
				// 		obj.account = this.mobileNumber;
				// 	} else {
				// 		obj.verifyType = 2;
				// 		obj.account = this.this.mobileNumber;
				// 	}
				// 	this.$tool.navTo(this.$tool.handleUrl('/pages/mine/testVerify', obj));
				// 	return;
				// }
				// this.$tool.navTo('/pages/mine/moneyPass');
				this.$refs.modelP.open();
			},
			confrim() {
				this.pass();
			},
			pass() {
				liquidityCisternAdd({
					coinType: this.coinType,
					depositAmount: this.price,
					fee: this.price,
					mobileUserId: uni.getStorageSync('mobileUserId'),
					period: this.list[this.listIndex].title,
				}).then(res => {
					console.log(res, 'cs');
					// this.$tool.navTo('操作成功');
					this.$store.dispatch('config/getAassetList');
					setTimeout(res => {
						uni.navigateBack();
					}, 800)
				})
			},
			getTime(e) {
				// 创建一个新的Date对象，它会自动设置为当前时间
				const now = new Date();

				// 通过设置日期来计算10天后的日期
				// 注意：Date对象的setDate方法会自动处理月份和年份的进位
				now.setDate(now.getDate() + Number(e));

				// 使用getFullYear()获取完整的四位数年份
				const year = now.getFullYear();

				// 使用getMonth()获取月份，注意JavaScript中的月份是从0开始的，所以需要+1
				const month = String(now.getMonth() + 1).padStart(2, '0');

				// 使用getDate()获取日期
				const day = String(now.getDate()).padStart(2, '0');

				// 打印或返回格式化的日期
				this.time3 = `${year}-${month}-${day}`;
			},
			isMultiple(num1, num2, epsilon = 1e-10) {
				if (num2 === 0) {
					return false; // 避免除以零
				}
				// 计算 num1 对 num2 的余数
				const remainder = num1 % num2;
				// 检查余数是否在允许的误差范围内
				return remainder < epsilon || Math.abs(remainder - num2) < epsilon;
			}
		}
	}
</script>

<style scoped lang="scss">
	.inputWrap {
		width: 630rpx;
		height: 80rpx;
		background: #000000;
		border-radius: 16rpx;

		input {
			font-size: 28rpx;
			color: #f7f7f7;
		}

		.placeholderClass {
			font-size: 28rpx;
			color: #7F838D;
		}
	}

	.inputWrapLight {
		width: 630rpx;
		height: 80rpx;
		background: #EAEAEA;
		border-radius: 16rpx;

		input {
			font-size: 28rpx;
			color: #0E0F11;
		}

		.placeholderClass {
			font-size: 28rpx;
			color: #7F838D;
		}
	}

	.btn {
		// width: 280rpx;
		width: 690rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.price {
		font-size: 36rpx;
		color: #F7F7F7;
	}

	.priceLight {
		color: #0E0F11;
	}

	.item1 {
		width: 210rpx;
		height: 66rpx;
		background: #16181C;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.item2 {
		width: 210rpx;
		height: 66rpx;
		background: #16181C;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		color: #F7F7F7;
		border: 2rpx solid #5951BA;
	}

	.item1Light {
		width: 210rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		color: #7F838D;
	}

	.item2Light {
		width: 210rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		color: #0E0F11;
		border: 2rpx solid #5951BA;
	}

	.block {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;

		.text1 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.text2 {
			font-size: 24rpx;
			color: #F7F7F7;
		}

		.text3 {
			font-size: 24rpx;
			color: #5951BA;
		}

		.text4 {
			font-size: 24rpx;
			color: #82DA4C;
		}
	}

	.blockLight {
		background: #FFF;
		border-radius: 30rpx;
		border: none;

		.text1 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.text2 {
			font-size: 24rpx;
			color: #0E0F11;
		}

		.text3 {
			font-size: 24rpx;
			color: #5951BA;
		}

		.text4 {
			font-size: 24rpx;
			color: #82DA4C;
		}
	}

	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordLight {
		color: #0E0F11;
	}

	.title1 {
		font-size: 32rpx;
		color: #F7F7F7;
	}

	.title1Light {
		color: #0E0F11;
	}

	.title2 {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.title2Light {
		color: #0E0F11;
	}
</style>